<script setup>
import {ref} from 'vue'
const msg = "回顾创建vue项目";
let msg1 = "回顾某些vue指令"
const changeN = ref("chaan");
let oneObje = ref("lailelaodi");
const shi = "当前显示的是if";
const fou = "当前显示的是else";
const forList=ref([{log:"第一句log",min:"其他字段"},
  {log:"第2句log",min:"其他字段"},
  {log:"第3句log",min:"其他字段"},{log:"第4句log",min:"其他字段"}])
</script>

<template>
  <div v-bind:style="{color:red}">
    Vue绑定类样式
  </div>
  <el-divider>回顾v-if、v-else指令</el-divider>
  <p>{{ msg1 }}</p>
  <button @click="oneObje=!oneObje">点击</button>
  <p v-if="oneObje">{{ shi }}</p>
  <p v-else>{{ fou }}</p>
  <el-divider>回顾v-for指令</el-divider>
  <ul v-for="items in  forList">
    <el-button type="success">{{items.log}}</el-button><el-button type="info">{{items.min}}</el-button>
  </ul>
  <el-button type="success">这是一elemenet-plus的按钮</el-button>
  <h1 v-text="msg"></h1>
</template>
<style scoped>
h1 {  margin: 0 auto;}

</style>